<template>
  <div class="my">
    <div class="top">
      <ul class="my-top-ul">
        <li>
          <van-image
            width="60px"
            height="60px"
            fit="cover"
            round
            :src="$root.userInfo .avatar || require('@/views/img/3.jpg')"
          />
        </li>
        <li>
          <router-link to="/login"
            ><span>{{ $root.userInfo .nickname || "请登录" }}</span></router-link
          >
        </li>
        <li>
          <button><router-link to="/user">编辑资料</router-link></button>
        </li>
      </ul>
    </div>
    <ul class="top-ul2">
      <li>
        <router-link to="/collect">
          <span>
            <svg class="tt-icon" aria-hidden="true">
              <use xlink:href="#icon-wodeshoucang"></use>
            </svg>
          </span>
          <span>收藏</span>
        </router-link>
      </li>

      <li>
        <router-link to="/IRelease">
          <span>
            <svg class="tt-icon" aria-hidden="true">
              <use xlink:href="#icon-wodefabu"></use>
            </svg>
          </span>
          <span>发布</span>
        </router-link>
      </li>

      <li>
        <router-link to="/history">
          <span>
            <svg class="tt-icon" aria-hidden="true">
              <use xlink:href="#icon-lishi"></use>
            </svg>
          </span>
          <span>历史</span>
        </router-link>
      </li>

    </ul>
    <div class="bot">
      <p><router-link to="/change">修改密码 </router-link></p>
      <p @click="show=true"><a>注销账号</a> </p>
      <p><a>联系我们</a> </p>
      <p><a>关于我们</a> </p>
    </div>
    <button v-if="$root.userInfo.token" class="button" @click="logout">
      注销登陆
    </button>
    <button v-else class="button">
      <router-link to="/login">去登录</router-link>
    </button>

    <!-- 注销账号弹出层 -->
    <van-action-sheet v-model="show" title="注销账号存在以下风险">
      <div class="content">
        <div class="content-top"> 
          <li>清空菜市场是开车生产是开车是开车是</li>
          <li>清空菜市场是开车生产是开车是开车是清空菜市场是开车生产是开车是开车是</li>
          <span>以上信息均将删除，不可恢复</span>
        </div>
        <p>温馨和提升温馨和提升温馨和提升温馨和提升温馨和提升温馨和提升温馨和提升温馨和提升温馨和提升温馨和提升</p>
        <h3>如小孙女从军事才能数据</h3>
        <button @click="getlogout">注销账号</button>
      </div>
      
    </van-action-sheet>
  </div>
</template>

<script>
import { Uploader } from "vant";
import { Image as VanImage } from "vant";
import { Dialog ,ActionSheet } from "vant";
export default {
  name: "WorkspaceJsonMy",
  components: {
    [Uploader.name]: Uploader,
    [ActionSheet.name]: ActionSheet,
    [VanImage.name]: VanImage,
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      show:false,
      userInfo:{},
      token:''
    };
  },
  created() {},
  mounted() {
    this.userInfo=JSON.parse(localStorage.getItem('userInfo'))
    this.token=localStorage.getItem('token')
  },

  methods: {
    getlogout(){
    this.$dialog.confirm({
      title: "温馨提示",
      message: "是否注销账号",
    }).then(res=>{
      this.$router.push({
        path:'/logout'
      })
    })
    },
    logout() {
      this.$dialog
        .confirm({
          title: "温馨提示",
          message: "是否退出登录",
        })
        .then((res) => {
          console.log(res);
          localStorage.removeItem("token");
          localStorage.removeItem("uid");
          localStorage.removeItem("userInfo");
          localStorage.removeItem("tokenExpired");

          this.$root.userInfo = {};
          this.$root.token = "";
          this.$root.uid = "";
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 收藏列表
    getidcollect() {
      this.user_id = localStorage.getItem("uid");
      this.$http
        .post("/api/get_fav_list", {
          user_id: this.user_id,
          skip: "0",
          limit: "10",
        })
        .then((res) => {
          console.log(res);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.my {
  height: 100vh;
  background-color: #eaeaea;
}
.top {
  background-color: #fff;
  background: url("./img/3.jpg") no-repeat;
  background-size: 100vw 58vw;
  height: 39vw;
  .my-top-ul {
    padding: 0 15px;
    padding-top: 10vw;
    display: flex;
    li:nth-child(1) {
      width: 80px;
      img {
        width: 100%;
      }
    }
    li:nth-child(2) {
      span {
        display: block;
        margin-top: 15px;
        color: #fff;
      }
      flex: 1;
    }
    li {
      button {
        margin-top: 15px;
        border-radius: 36px;
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 0 5px;
        color: rgb(89, 89, 89);
        font-size: 13px;
      }
    }
  }
  .top-ul {
    display: flex;
    color: #fff;
    li {
      padding-top: 40px;
      width: 49%;
      text-align: center;
      span {
        display: block;
        margin-bottom: 3px;
        .tt-icon {
          color: pink;
          font-size: 32px;
          margin-bottom: 5px;
        }
      }
    }
  }
}
.top-ul2 {
  background-color: #fff;
  display: flex;
  li {
    padding-top: 20px;
    width: 49%;
    text-align: center;
    span {
      display: block;
      margin-bottom: 3px;
      .tt-icon {
        color: pink;
        font-size: 32px;
        margin-bottom: 5px;
      }
    }
  }
}
.bot {
  margin-top: 6px;
  background-color: #fff;
  padding: 0 0 0px 15px;
  p {
    border-bottom: 1px solid #ccc;
    height: 41px;
    line-height: 41px;
  }
}
.button {
  margin-top: 10px;
  width: 100%;
  height: 45px;
  border: none;
  background-color: #fff;
  color: red;
}
.content {
  padding: 0 10px 10px 10px;
  height: 136vw;
  p{
    padding: 5vw 0px;
    font-size: 15px;
    color: #949494;
    line-height: 19px;
  }
  h3{
    text-align: center;
    color: red;
    font-size: 18px;
    font-weight: 600;
  }
  .content-top{
    background-color: #eee;
    height: 121px;
    border-radius: 10px;
    padding: 10px;
    li{
      padding-top: 10px;
      line-height: 23px;
    }
    span{
      display: block;
      padding: 10px 20px;
      color: red;
    }
  }
  button{
    height: 57px;
    width: 100%;
    border-radius: 29px;
    border: none;
    margin-top: 34vw;
    font-size: 19px;
    font-weight: 600;
    background-color: #65c1f6;
    color: #f55454;
    a{
      color: #f55454;
    }
  }
}

.van-action-sheet__header{
  text-align: left;
  padding-left: 30px;
  font-size: 18px;
  font-weight: 700;
}
</style>